<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户角色管理</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">


</head>

<body>
<div id="role">

    <!--    内容-->
    <div style="color: black; font-size: 20px; margin: 10px 0">角色管理</div>
    <div style="height: 1px; background-color: white"></div>
    <el-input v-model="search" style="width: 20%;" suffix-icon="el-icon-search" placeholder="请输入名称按回车搜索"
              @keyup.enter.native="loadTable"></el-input>
    <el-button @click="add" type="primary" size="mini" style="margin: 10px 0">新增</el-button>
    <!-- <el-button @click="exp" type="primary" size="mini" style="margin: 10px 0">导出</el-button> -->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                :prop="item.prop"
                :label="item.label"
                v-for="item in props"
        >
        </el-table-column>
        <el-table-column
                label="功能">
            <template slot-scope="scope">
                <el-select v-model="scope.row.permissions" value-key="id" multiple placeholder="请选择"
                           @change="changePer(scope.row)">

                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.pname"
                            :value="item">
                    </el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="edit(scope.row)" type="text">编辑</el-button>
                <el-popconfirm
                        @onConfirm="del(scope.row.id)"
                        title="确定删除？"
                >
                    <el-button type="text" slot="reference">删除</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="background-color: white">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

    <el-dialog title=角色信息 :visible.sync="dialogFormVisible" width="30%"
               close-on-click-modal="false" close-on-press-escape="false" show-close="false">
        <el-form :model="entity">
            <el-form-item v-if="item.prop !== 'id'" :label="item.label" label-width="100px" v-for="item in props">
                <el-input v-model="entity[item.prop]" autocomplete="off" style="width: 80%"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updaterole1">确 定</el-button>
        </div>
    </el-dialog>


</div>

</body>
<script src="../../js/vue.min.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/base.js"></script>

<script type="text/javascript">
    <!--    js内容 -->
    let urlBase = "/role";
    new Vue({
        el: "#role",
        data() {
            return {
                user: {},
                tableData: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
                dialogFormVisible: false,
                tabledatatemp:[],
                entity: {},
                isCollapse: false,
                search: '',
                props: [{"label": "ID", "prop": "id"}, {"label": "标识", "prop": "name"}, {"label": "名称", "prop": "nameZh"}, {"label": "描述", "prop": "rdescribe"}],
                options: []
            }
        },
        created() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            this.loadTable();


        },
        methods: {
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            loadTable() {
                $.get("/role/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.search).then(res => {
                    this.tableData = res.data.records;




                    this.tabledatatemp = JSON.parse(JSON.stringify(res.data.records));
                    this.total = res.data.total;

                    console.log("tabledata")
                    console.log(this.tableData)

                });

                $.get("/permission/getallpermission").then(res => {


                    this.options = res.data;

                    console.log("options")
                    console.log(this.options)
                })
            },
            // exp() {
            //     window.open(urlBase + "/export");
            // },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.loadTable();
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
                this.loadTable();
            },
            add() {
                this.entity = {};
                this.dialogFormVisible = true;
            },
            save() {
                console.log(this.entity)
                $.ajax({
                    url: "/role",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(this.entity)
                }).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        });
                        this.loadTable();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                    this.dialogFormVisible = false;
                    this.loadTable()
                    // 重新请求用户基础数据
                    // $.get("/user/detail/" + this.user.jobnum).then(res => {
                    //     this.user = res.data;
                    //     console.log("/user/detail/" + this.user.jobnum);
                    //     sessionStorage.setItem("user", JSON.stringify(this.user));
                    // })
                })
            },
            updaterole() {
                var returndata = {};//需要传回去原数据和新数据
                returndata.a = this.tabledatatemp;
                console.log("前")
                console.log(this.entity)
                returndata.b = this.entity;
                console.log("returndata")
                console.log(returndata)
                // console.log(this.entity);

                $.ajax({
                    url: "/role",
                    type: "PUT",
                    contentType: "application/json",
                    data: JSON.stringify(returndata)
                }).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        });
                        this.loadTable();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                    this.dialogFormVisible = false;
                })
            },

            edit(obj) {
                this.entity = obj;

                this.dialogFormVisible = true;
            },
            updaterole1(){
                console.log(JSON.stringify(this.entity));
                $.ajax({
                    url: "/role/updaterole",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(this.entity)
                }).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        });
                        this.loadTable();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                    this.dialogFormVisible = false;
                })
            },
            del(id) {
                $.ajax({
                    url: "/role?deleteid=" + id,
                    type: "delete"
                }).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        })
                        this.loadTable();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            },
            changePer(obj) {
                this.entity = obj;
                this.updaterole();

            }
        }
    })


</script>


</html>